<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="utf-8">
    <meta name="renderer" content="webkit">
    <meta http-equiv="Window-target" content="_top">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=0">
    <!-- InstanceBeginEditable name="doctitle" -->
    <title>Java在线编程-[[${#params.value("website_logo_words")}]]</title>
    <!-- InstanceEndEditable -->
	<meta name="Author" th:content='${#params.value("author_name")}'>
	<meta name="Copyright" th:content='${#params.value("author_name")}'>
	<meta name="keywords" th:content='${#params.value("key_word")}' />
	<meta name="description" th:content='${#params.value("website_info_title")}'/>
	<link href="/css/loading.css" rel="stylesheet" />
	<link href="/css/scroll-bar.css" rel="stylesheet" />
	<link href="/lib/layui-v2.3.0/css/layui.css" rel="stylesheet" media="all" />
	<link href="/css/common.css" rel="stylesheet" />
	<link href="/css/suspension.css" rel="stylesheet" />
	<link href="/css/animate.css" rel="stylesheet" />
	<link href="/Eextend/iconfont/iconfont.css" rel="stylesheet" />
	<script src="/Eextend/iconfont/iconfont.js"></script>
	<script src="/js/jquery.min.js"></script>
	<script src="/lib/layui-v2.3.0/layui.js"></script>
	<script src="/js/wow.min.js"></script>
    <!-- 让IE8/9支持媒体查询，从而兼容栅格 -->
    <!--[if lt IE 9]>
      <script src="https://cdn.staticfile.org/html5shiv/r29/html5.min.js"></script>
      <script src="https://cdn.staticfile.org/respond.js/1.4.2/respond.min.js"></script>
    <![endif]-->
	<script src="//cdn.staticfile.org/codemirror/5.48.2/codemirror.min.js"></script>
	<script src="https://cdn.staticfile.org/codemirror/5.48.2/addon/mode/simple.min.js"></script>
	<link rel="stylesheet" href="//cdn.staticfile.org/codemirror/5.48.2/codemirror.min.css">
	<script src="//cdn.staticfile.org/codemirror/5.48.2/mode/clike/clike.js"></script>
	<style>
		.CodeMirror {
			line-height: 1.3em;
			font-family: monospace;
			position: relative;
			overflow: hidden;
			background-color: white;
			width: 100%;
			height: 373px;
			margin-bottom: 9px;
			color: #555555;
			border: 1px solid #ccc;
			-webkit-border-radius: 3px;
			-moz-border-radius: 3px;
			border-radius: 3px;
			-webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
			-moz-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
			box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
			-webkit-transition: border linear 0.2s, box-shadow linear 0.2s;
			-moz-transition: border linear 0.2s, box-shadow linear 0.2s;
			-ms-transition: border linear 0.2s, box-shadow linear 0.2s;
			-o-transition: border linear 0.2s, box-shadow linear 0.2s;
			transition: border linear 0.2s, box-shadow linear 0.2s;
		}
		.CodeMirror-focused {
			/* Copied from Bootstrap's textarea */
			border-color: rgba(82, 168, 236, 0.8);
			outline: 0;
			outline: thin dotted \9;
			/* IE6-9 */
			-webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 8px rgba(82, 168, 236, 0.6);
			-moz-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 8px rgba(82, 168, 236, 0.6);
			box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 8px rgba(82, 168, 236, 0.6);
		}
		.layui-textarea:focus {
			border-color: #66afe9;
			outline: 0;
			-webkit-box-shadow: inset 0 1px 1px rgba(0,0,0,.075), 0 0 8px rgba(102,175,233,.6);
			box-shadow: inset 0 1px 1px rgba(0,0,0,.075), 0 0 8px rgba(102,175,233,.6);
		}
		.layui-card-header {
			position: relative;
			height: 62px;
			line-height: 42px;
			padding: 10px 15px;
			border-bottom: 1px solid #f6f6f6;
			color: #333;
			border-radius: 2px 2px 0 0;
			font-size: 14px;
		}
		.pull-right {
			float: right!important;
		}

		label {
			display: inline-block;
			max-width: 100%;
			margin-bottom: 5px;
			font-weight: 700;
		}
	</style>
</head>
<body>


<div th:replace="/common/fragment :: frontendHeadher"></div>
<!--<section class="bg-overlay layui-hide">-->
<!--<div class="overlay"></div>-->
<!--<div class="layui-row text py-5">-->
<!--<p class="lead">Keep on going never give up.</p>-->
<!--<h1>-->
<!--我为你翻山越岭，却无心看风景-->
<!--</h1>-->
<!--<a href="#welcome" class="layui-btn layui-btn-normal layui-btn-radius layui-btn-lg">Let's Go</a>-->
<!--</div>-->
<!--</section>-->
<section class="container">
	<div class="layui-container">
		<div class="layui-card" style="margin-top: 30px;">
			<div class="layui-card-header">
				<button type="button" class="layui-btn layui-btn-normal" id="submitBTN" ><i class="layui-icon">&#xe609;</i> 点击运行</button>
				<button type="button" class="layui-btn layui-btn-primary" id="clearCode" ><i class="layui-icon">&#xe640;</i> 清空</button>
				<label class="pull-right"><strong style="font-size: 16px"><i class="layui-icon">&#xe639;</i> JAVA 在线执行</strong></label>
			</div>
			<div class="layui-card-body layui-row layui-col-space20">
				<div class="layui-col-md6" >
					 <textarea class="layui-textarea"   id="code" name="code" rows="18">
                     [[${code}]]
					 </textarea>
				</div>
				<div class="layui-col-md6">
					<textarea placeholder="运行结果……"   class="layui-textarea" id="compiler-textarea-result" rows="18">Hello World!</textarea>
				</div>
			</div>
		</div>
	</div>
</section>

<!--<script src="/Eextend/ace/ace.js"></script>-->
<!--<script src="/Eextend/ace/ext-language_tools.js"></script>-->

<div th:replace="/common/fragment :: frontendFooter"></div>
<div th:replace="/common/fragment :: frontendLongin"></div>


<script>
    layui.use(['layer','element'], function() {
        var layer = layui.layer;
        var element = layui.element;
    });
    var editor = CodeMirror.fromTextArea(document.getElementById("code"), {
        lineNumbers: true,
        matchBrackets: true,
        mode: "text/x-java",
        indentUnit: 4,
        indentWithTabs: true,
    });
    btn = $("#submitBTN");
    btn.click(function() {
        btn.prop('disabled', true);
        btn.addClass("layui-btn-disabled");
        loadingdata = '程序正在运行中……';
        $("#compiler-textarea-result").val(loadingdata);

        code = editor.getValue();
        $.post("/frontend/compiler/compiler",{code:code},function (result) {

           if(result.code == 200){
               var data = result.data;
				var str ="";
				if (!data.compilerSuccess){
					str += data.compilerMessage;
				}
				if (data.runMessage){
					str += data.runMessage;
				}
				$("#compiler-textarea-result").val(str);
           }else {
               layer.msg(result.msg+",请登录后使用！！！", {offset: '15px', time: 3000, icon: 2});
               $("#compiler-textarea-result").val(result.msg+",请登录后使用！！！");
		   }
        });
        setTimeout(function(){
            btn.prop('disabled', false);
            btn.removeClass("layui-btn-disabled");
        }, 10*1000);
    });


    $("#clearCode").click(function() {
        var r=confirm("确认清空？");
        if (r==true){
            editor.setValue("");
            editor.clearHistory();
            $("#compiler-textarea-result").val("");
            btn.prop('disabled', true);
        }
    });

    editor.on("change",function(editor,change){
        btn.prop('disabled', false);
        btn.removeClass("layui-btn-disabled");
    });
</script>
</body>
</html>
